import React, { useState } from "react";
import { Form, Input, Button, message } from "antd";
import { getEmailCode, reg } from "@/api/api";

const Reg: React.FC = () => {
  const { Search } = Input;
  const [loadingState, setLoadingState] = useState(false);
  const [formLoading, setFormLoading] = useState(false);

  const search = (value: any) => {
    setLoadingState(true);
    getEmailCode(value).then((res) => {
      setLoadingState(false);
      if (res.code === 200) {
        message.success(res.msg);
      } else {
        message.warn(res.msg);
      }
    });
  };
  const finish = (value: any) => {
    setFormLoading(true);
    reg(value).then((res: any) => {
      setFormLoading(false);
      if (res.code === 200) {
        message.success(res.msg);
      } else {
        message.warn(res.msg);
      }
    });
  };
  return (
    <div className={"form"}>
      <Form onFinish={finish}>
        <Form.Item name="user_name">
          <Search
            placeholder={"你的邮箱"}
            onSearch={search}
            loading={loadingState}
            enterButton="发送"
          />
        </Form.Item>

        <Form.Item name={"code"}>
          <Input placeholder={"验证码"} />
        </Form.Item>
        <Form.Item name="user_password">
          <Input.Password placeholder={"设置密码"} />
        </Form.Item>

        <Form.Item name="user_nickname">
          <Input placeholder={"设置你的名称"} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" loading={formLoading}>
            注册
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default Reg;
